<template>
  <div class="vue-component">
    <h1 class="title">SCSS in Vue</h1>
    <div class="container">
      <button class="btn">点击我</button>
      <div class="content">
        <p>测试内容</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ScssTest',
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

<!-- CSS 样式 -->
<style>
  .vue-component {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 错误：重复选择器 */
  .vue-component {
    padding: 20px;
  }

  .title {
    color: #007bff;
    font-size: 24px;
  }

  /* 错误：命名颜色 */
  .content p {
    color: red;
    margin-top: 10px;
  }

  /* 错误：vendor 前缀 */
  .container {
    transform: scale(1);
    display: flex;
  }
</style>

<!-- SCSS 样式 -->
<style lang="scss">
  $primary-color: #007bff;
  $spacing: 10px;

  .scss-section {
    padding: $spacing;

    // 错误：变量命名不规范
    $invalidVarName: 20px;
    margin-bottom: $invalidVarName;

    &__header {
      color: $primary-color;

      // 嵌套过深
      & > .item {
        font-weight: bold;

        &-text {
          font-style: italic;

          &:hover {
            color: darken($primary-color, 10%);
          }
        }
      }
    }

    // mixin使用
    @mixin button-style($color) {
      background-color: $color;
      padding: $spacing;
      border-radius: 4px;
    }

    .btn {
      @include button-style($primary-color);
    }
  }
</style>
